Форум

Synov_son · #1 (**permalink**) 08.01.2016, 21:19

Здравствуйте,

Помогите, пожалуйста, в поиске ошибки.

Есть задача: отправить определенное кол-во запросов на сервер один за другим, не асинхронно, и отображать при этом текущий прогресс.

<div data-url="someurl" data-times-repeat="5" class="pbar">
    <p>Processing...</p>
    <div class="processBar">
        <p class="pbState">0%</p>
        <div class="pbStateBox"></div>
    </div>
</div>

$(document).ready(function(){
	$('.pbar').each(function(i, el){
        setTimeout(function(){ pbar(el) }, 1500*(i+1));
    });
});
function pbar(sel){
	if(sel){
		var $el = $(sel);
		var url = $el.data('url');
		var timesRepeat = 3;//$el.data('times-repeat');
		var timeout = 10*1000;
		if(url && timesRepeat){
			var incPerQuery = Math.floor(100/timesRepeat);
			
			var $bar = $el.find('.pbStateBox');
			var $state = $el.find('.pbState');
			
			for(var i=1; i<=timesRepeat; i++){
				var params = {
				   url: 	url+'&ajax',
				   timeout: timeout,
				   async:	false,
				   success: function(data){
					   var process = (i==timesRepeat ? 100 : i*incPerQuery)+'%';
					   
					   $bar.width(process);
					   $state.html(process);
				   }
				};
				setTimeout(function(){$.ajax(params)}, 300);
			}
		}
	}
}

Но вместо того чтобы отобразить пошагово увеличение процента в блоке с прогрессом ничего не происходит вплоть до последнего запроса (ждет, а потом сразу 100%). Т.е. 0% и потом 100%, но если наблюдать за процессом через dev tools изменения в html происходят, пример:

<p class="pbState">33%</p>
<div class="pbStateBox"></div>

Но только в .pbState, а ширина .pbStateBox даже не сетится. А должно быть:

<p class="pbState">33%</p>
<div class="pbStateBox" style="width: 33%;"></div>

Буду благодарен за любой совет.

Dilettante_Pro · #2 (**permalink**) 15.01.2016, 13:59

Synov_son,
попробуйте вместо

$bar.width(process);

такой вариант:

$bar.css('width', process);

Dilettante_Pro · #3 (**permalink**) 15.01.2016, 15:35

Вот небольшая симуляция вашего прогресс-бара

<!DOCTYPE html>
<html>
<head>
    <title>Untitled Page</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
</script>
    <script type="text/javascript">
        var progress = 0;
        function wide() {
            progress = progress + 5;

            $('.pbState').html(progress + '%');
            $('.pbStateBox').css('width', progress + '%');
        }
    </script> 
</head>
<body>
 <p class="pbState">0%</p>
 <div class="pbStateBox" style="width: 0%; border:3px solid red;"></div>
 <input type=button value="Расширяем" onclick="wide()" />
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript